<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style >
      [v-cloak]{
        display: none;
      }
  </style>
  <div id="app">
      <!-- v-bind 指令渲染属性  和父传子数据 简写 :
      v-on: 绑定事件 简写@ 
      v-for 循环指令
      v-if v-else-if v-else 显示隐藏
      v-show 显示隐藏
      v-model="value" 双向绑定指令 -->
      
     <!-- v-cloak  配合css 来隐藏掉 模版编译过程-->
      <div id="app" v-cloak>
          <div>
            <!-- v-html 指令 用来渲染html数据的指令 -->
             <div v-html="myhtml"></div>
             
             <div class="wrap" v-html="img"></div>

             <!-- v-text 渲染文字的标签 -->
              <div>{{content}}</div>
             <div v-text="content"></div>

            <!-- v-pre  将{{}}保留原样输出-->
            保留空格的标签 <pre>你哈   啥地方  阿道夫 是打发顺丰</pre>
            <div v-pre>{{你好}}</div>
           
             <h1>{{num*2123424-131/345345+324432}}</h1>

             <!-- v-once 渲染一次 无法重新渲染 -->
              <h1 v-once>{{mycity}}</h1>
              <button @click="mycity='北京'">改变</button>
          </div>
      </div>


  </div>
  <script src="./vue.js"></script>
  <script>
          new Vue({
            el:"#app",
            data(){
              return {
                mycity:"三亚",
                num:123123,
                content:"丁俊晖",
                myhtml:"<h1>今天星期五</h1>",
                img:"<img src='https://img2.baidu.com/it/u=3097253230,865203483&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1449' />"
              }
            }
          })
  </script>
</body>
</html>